<script setup>
import { ref } from "vue";
import * as echarts from "echarts";

import { formatWithComma } from "@/utils/ruoyi.js";

const lineChart = ref();
const channelType = ref();
const accType = ref();
const dateTime = ref();
const activeIndex = ref(0);
const condList = ref([
  { name: "展示量", count: 120900 },
  { name: "点击量", count: 120900 },
  { name: "点击率", count: 120900 },
  { name: "花费", count: 120900 },
  { name: "CPM", count: 120900 },
  { name: "CPC", count: 120900 },
  { name: "转化量", count: 120900 },
]);

function initChart() {
  const commandstatsIntance = echarts.init(lineChart.value, "macarons");
  commandstatsIntance.setOption({
    color: ["#80FFA5"],
    // title: {
    //   text: "Gradient Stacked Area Chart"
    // },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        label: {
          backgroundColor: "#6a7985",
        },
      },
    },
    // legend: {
    //   data: ["Line 1"]
    // },
    toolbox: {
      feature: {
        saveAsImage: {},
      },
    },
    xAxis: [
      {
        type: "category",
        boundaryGap: false,
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
      },
    ],
    yAxis: [
      {
        type: "value",
      },
    ],
    series: [
      {
        name: "Line 1",
        type: "line",
        stack: "Total",
        smooth: true,
        lineStyle: {
          width: 0,
        },
        showSymbol: false,
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgb(128, 255, 165)",
            },
            {
              offset: 1,
              color: "rgb(1, 191, 236)",
            },
          ]),
        },
        emphasis: {
          focus: "series",
        },
        data: [140, 232, 101, 264, 90, 340, 250],
      },
    ],
  });
  window.addEventListener("resize", () => {
    commandstatsIntance.resize();
  });
}
onMounted(() => {
  initChart();
});
</script>

<template>
  <div class="chart-container">
    <div class="title">数据概览</div>
    <div class="line" />
    <div class="select-wrap">
      <div style="display: flex; flex-direction: row; flex: 1">
        <el-select
          v-model="channelType"
          placeholder="选择渠道"
          style="width: 120px"
        >
          <el-option
            v-for="(item, index) in 5"
            :key="index"
            label="dsdd"
            value="index"
          />
        </el-select>
        <el-select
          v-model="accType"
          placeholder="选择账户"
          style="width: 120px; margin-left: 20px"
        >
          <el-option
            v-for="(item, index) in 5"
            :key="index"
            label="dsdd"
            value="index"
          />
        </el-select>
      </div>
      <div>
        <el-date-picker
          v-model="dateTime"
          type="datetimerange"
          range-separator="~"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
      </div>
    </div>
    <div class="static-cond-wrap">
      <div
        class="item"
        v-for="(item, index) in condList"
        :key="index"
        :class="{ 'item-sel': activeIndex == index }"
      >
        <div>{{ item.name }}</div>
        <div style="margin-top: 10px">
          {{ formatWithComma(item.count) }}
        </div>
      </div>
    </div>
    <div ref="lineChart" style="height: 420px; margin-top: 10px" />
  </div>
</template>

<style lang="scss">
.chart-container {
  margin: 20px;
  background-color: #fff;
  border: #dcdfe6 solid 1px;
  border-radius: 10px;
  .title {
    margin: 20px;
    color: #333;
    font-size: 22px;
    font-weight: 500;
  }

  .line {
    background-color: #dcdfe6;
    width: 100%;
    height: 1px;
  }
  .select-wrap {
    display: flex;
    flex-direction: row;
    margin: 20px;
  }
  .static-cond-wrap {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    .item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      color: #333;
      font-size: 12px;
    }
    .item-sel {
      color: #17bd9c;
      font-weight: bold;
    }
  }
}
</style>
